<template>
    <div class="page">
        <div class="page-header flex-row flex-item">
            <div class="report-name flex1">评估报告: {{ reportName }}</div>
            <el-dropdown class="no-print" style="margin-right: 15px" @command="handleCommand">
                <el-button size="small">下载报告</el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="PDF">pdf</el-dropdown-item>
                    <el-dropdown-item command="DOC">docx</el-dropdown-item>
                    <el-dropdown-item command="Xlsx">xlsx</el-dropdown-item>
                    <el-dropdown-item command="HTML">html</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-button class="no-print" @click="back" size="small">返回</el-button>
        </div>
<!--        <div class="item-title">网络设备合理性评估报告</div>-->
        <div class="info-card">
            <div class="info-card-header flex-row flex-item">
                <div class="flex1 flex-row">
                    <div class="header-label">综合评分：</div>
                    <div class="header-value flex1"
                         v-if="resultInfoData.evaluateTotal || resultInfoData.evaluateTotal === 0"
                         :class="{'error-text': resultInfoData.evaluateTotal < 60}">
                        {{ resultInfoData.evaluateTotal || 0 }}
                    </div>
                    <div v-else class="header-value flex1"> - </div>
                </div>
                <div class="flex1 flex-row">
                    <div class="header-label">风险等级：</div>
                    <div class="header-value flex1"
                         :class="{'error-text': resultInfoData.evaluateTotal < 60}">
                        {{ resultInfoData.risk || '-' }}
                    </div>
                </div>
                <div class="flex1 flex-row">
                    <div class="header-label">评估时间：</div>
                    <div class="header-value flex1">{{ moment(resultInfoData.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                </div>
            </div>

            <template v-if="resultInfoData.maps && resultInfoData.maps.length">
                <div class="flex-row flex-item">
                    <div class="title-mark"></div>
                    <div class="header-value flex1">近期报告得分</div>
                </div>
                <div class="table-container">
                    <div class="table-row flex-row flex-item">
                        <div v-for="item in resultInfoData.maps"
                             :key="item.date" class="cell flex1">
                            <div>时间：{{moment(item.date).format('YYYY-MM-DD HH:mm')}}</div>
                            <div>得分：{{item.score}}</div>
                        </div>
                    </div>
                </div>
            </template>

            <div class="flex-row flex-item">
                <div class="title-mark"></div>
                <div class="header-value flex1">风险判定明细</div>
            </div>
            <div class="table-container">
                <div class="table-row flex-row flex-item">
                    <div v-if="topoView" class="cell flex1">连接名称</div>
                    <div class="cell flex1">判定对象</div>
                    <div class="cell flex1">权重系数</div>
                    <div class="cell flex1">实际值</div>
                    <div class="cell flex1">评估得分(低于60为异常状态)</div>
                </div>
                <template v-if="resultInfoData.quotaDetail && resultInfoData.quotaDetail.length">
                    <div class="table-row flex-row flex-item" v-for="item in resultInfoData.quotaDetail" :key="item.id">
                        <div v-if="topoView" class="cell flex1">{{item.nodeName}}</div>
                        <div class="cell flex1">{{item.quotaName}}</div>
                        <div class="cell flex1">{{ item.weightRatio }}</div>
                        <div class="cell flex1">{{ item.realValue }}</div>
                        <div class="cell flex1" :class="{'error-text': item.evaluateValue < 60}">{{ item.evaluateValue }}</div>
                    </div>
                </template>
                <div v-else class="table-row flex-row flex-item">
                    <div class="cell" style="color: #999999">无有效数据</div>
                </div>
            </div>
            <template v-if="resultInfoData.quotaList && !topoView">
                <div class="flex-row flex-item">
                    <div class="title-mark"></div>
                    <div class="header-value flex1">模板无效指标（在设备中无对应数据）</div>
                </div>
                <div class="no-data-quota">
                    <div class="cell"> {{resultInfoData.quotaList.join('，')}} </div>
                </div>
            </template>
            <div class="flex-row flex-item">
                <div class="title-mark"></div>
                <div class="header-value flex1">问题分析</div>
            </div>
            <div class="info-item-content">
                <template v-if="resultInfoData.analysis">
                    <p style="padding: 5px 0" v-for="(text, index) in resultInfoData.analysis.split('#%&')" :key="index">{{index + 1}}、{{text}}</p>
                </template>
                <p v-else style="color: #999999">暂无数据</p>
            </div>
            <div class="flex-row flex-item">
                <div class="title-mark"></div>
                <div class="header-value flex1">处理建议</div>
            </div>
            <div class="info-item-content">
                <template v-if="resultInfoData.suggestions">
                    <p style="padding: 5px 0" v-for="(text, index) in resultInfoData.suggestions.split('#%&')" :key="index">{{index + 1}}、{{text}}</p>
                </template>
                <p v-else style="color: #999999">暂无数据</p>
            </div>
        </div>
    </div>
</template>

<script>
import { getHtmlStr } from '@/utils/exportHtml'
import FileSaver from 'file-saver';
import htmlToDocx from 'html-docx-js/dist/html-docx';
import moment from 'moment'

export default {
  name: 'resultInfo',
  data() {
    return {
      moment,
      activeNames: '1',
      resultId: '',
      resultInfoData: {},
      topoView: false
    }
  },
  computed: {
    reportName() {
      return (this.topoView ? '节点评估报告' : '设备评估报告') + moment().format('YYYYMMDDHHmmss')
    }
  },
  methods: {
    downXlsx() {
      const params = this.topoView ? {analysisId: this.resultId} : {resultId: this.resultId}
      this.$http.get('/evaluate/exportReport', {
        params,
        responseType: 'blob',
        headers: {
          'isFileExport': true
        }
      }).then(res => {
        const fileName = this.reportName + '.xlsx'
        let content = res.data; // 文件流
        let blob = new Blob([content]);
        let link = document.createElement('a');
        link.download = fileName;
        link.style.display = 'none';
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href); // 释放URL 对象
        document.body.removeChild(link);
      }).catch(err => {
        this.$TZmessage.error(err.msg || '下载失败')
      })
    },
    queryTopoInfo() {
      this.topoView = true
      this.$http.get('/topu/getDetailAnalysis', {
        params: {
          analysisId: this.resultId
        }
      }).then(res => {
        this.resultInfoData = {
          ...res,
          maps: [],
          createTime: moment(res.createTime).format('YYYY-MM-DD HH:mm:ss')
        }
      })
    },
    queryInfo() {
      this.topoView = false
      this.$http.get('/evaluate/getResultDetail', {
        params: {
          resultId: this.resultId
        }
      }).then(res => {
        this.resultInfoData = {
          ...res,
          maps: (res.maps || []).map(item => {
            return {
              date: moment(item.date).format('YYYY-MM-DD HH:mm'),
              score: item.score
            }
          }),
          createTime: moment(res.createTime).format('YYYY-MM-DD HH:mm:ss')
        }
      }).catch(err => {
        this.$TZmessage.error(err.error || '获取数据失败')
      })
    },
    handleCommand(res) {
      if (res === 'PDF') {
        const title = document.title
        document.title = this.reportName
        window.print()
        setTimeout(() => {
          document.title = title
        }, 0)
      } else if (res === 'DOC') {
        this.exportDoc()
      } else if (res === 'Xlsx'){
        this.downXlsx()
      } else {
        this.exportHtml()
      }
    },
    back() {
      this.$router.back()
    },
    exportDoc() {
      const html = getHtmlStr(this.resultInfoData, this.reportName, this.topoView)
      let blob = htmlToDocx.asBlob(html, { orientation: 'landscape' });
      FileSaver.saveAs(blob, `${this.reportName}.docx`);
    },
    exportHtml() {
      let html = getHtmlStr(this.resultInfoData, this.reportName, this.topoView)
      let downloadLink = document.createElement('a');
      let uri = window.URL.createObjectURL(new Blob([html], { type: 'text/html;charset=utf-8,\ufeff' }));
      downloadLink.href = uri;
      downloadLink.download = `${this.reportName}.html`;
      downloadLink.click();
      window.URL.revokeObjectURL(uri);

    }
  },
  mounted() {
    const id = this.$route.query.id
    const analysisId = this.$route.query.analysisId
    this.resultId = id || analysisId
    if (id) {
      this.queryInfo()
    }
    if (analysisId) {
      this.queryTopoInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
    .page {
        .page-header {
            box-sizing: border-box;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(112, 112, 112, 0.19);
            .report-name {
                font-weight: bold;
                font-size: 18px;
            }
        }
        .item-title {
            font-weight: bold;
            font-size: 16px;
            line-height: 60px;
        }
        .info-card {
            background: #F7F8FA;
            padding-bottom: 20px;
            ::v-deep .el-collapse-item__header {
                background: #F7F8FA;
            }
            .info-card-header {
                margin: 0 15px;
                border-bottom: 1px solid rgba(112, 112, 112, 0.19);
                height: 56px;
                .header-label {
                    font-weight: bold;
                    font-size: 14px;
                }
            }
            .header-value {
                color: #616164;
                &.error-text {
                    color: #D14040;
                }
            }
            .title-mark {
                width: 3px;
                height: 22px;
                background: #1E5EFF;
                margin: 20px 5px;
            }
            .table-container {
                background: #F7F8FA;
                padding: 0 15px;
            }
            .table-row {
                min-height: 30px;
                padding: 10px 45px;
                box-sizing: border-box;
                border-bottom: 1px solid rgba(112, 112, 112, 0.19);
                .error-text {
                    color: #D14040;
                }
            }
            .no-data-quota {
                min-height: 30px;
                padding: 10px 45px;
                box-sizing: border-box;
                background: #F7F8FA;
                color: #616164;
            }
            .info-item-content {
                margin-left: 60px;
                margin-bottom: 20px;
                color: #616164;
            }
        }
    }
    .no-print {
        @media print {
            display: none;
        }
    }
</style>